<template>
  <div>
    <van-tabs sticky :swipe-threshold="5" @click="handleTabClick" :active="active">
      <van-tab v-for="tab in tabsItem" :title="tab.name" :key="tab.type">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :offset="100" @load="loadMore">
          <van-cell-group v-for="el in items" class="order_list--panel" :key="el.id">
              <van-cell :title="getStatusText(el.status)" :label="el.createTime" >
                  <van-icon slot="icon" class="van-cell__left-icon" :name="getStatusIcon(el.status)" style="margin-top: 2px;"/>
                  <div slot="right-icon" class="money_text">
                      <span>{{el.money.toFixed(2)}}</span>
                  </div>
              </van-cell>
          </van-cell-group>
        </van-list>
      </van-tab>
    </van-tabs>
    <is-empty v-if="isEmpty">没有找到符合条件的记录</is-empty>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import IsEmpty from "@/vue/components/is-empty/";
import loadMore from '@/vue/mixin/list-load-more';
import scrollFixed from '@/vue/mixin/scroll-fixed';
import { BALANCE_PICK_RECORD } from '@/api/user';
const STATUS_TEXT = {
    '-1': "无效",
    1: "申请中",
    2: "审核通过",
    3: "打款成功",
}

const STATUS_ICON = {
    '-1': "info-o",
    1: 'edit-data',
    2: 'passed',
    3: 'gold-coin'
}

export default {
    name: 'pick-record',
	mixins: [loadMore, scrollFixed],
    data() {
        return {
          active: 0,  
	      items: [],
	      tabsItem: [{
	          name: "全部",
	        },
	        {
	          name: "待审核",
	          status:1,
	        },
	        {
	          name: "未打款",
	          status: 2,
	        },
	        {
	          name: "已打款",
	          status: 3,
	        },
	        {
	          name: "无效",
	          status: -1,
	        }
          ],
        }
    },
	  created() {
	    this.resetInit();
	  },

	  methods: {
	    initData() {
	      const i = this.active;
	      const status = this.tabsItem[i].status;
	      return this.$reqGet(BALANCE_PICK_RECORD, {
	        mid: this.user.id,
	        status,
	        offset: (this.pages.currPage - 1) * this.pages.perPage,
	        limit: this.pages.perPage
	      }, {
	        hideLoading: true
	      }).then(res => {
			const { rows, total } = res.data.data;
			this.items.push(...rows);
			return {
				pageCount: rows.length,
				totalCount: total
			};
	      })
	    },
	    handleTabClick(index) {
            this.active = index; 
            this.resetInit();
	    },
        getStatusText(status){
            return STATUS_TEXT[status] || '';
        },
        getStatusIcon(status) {
            return STATUS_ICON[status];
        }
	  },

    components: {
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
        [IsEmpty.name]: IsEmpty
    }
}
</script>

<style lang="scss" scoped>
.money_text {
    color: $red;
    font-size: 18px;
    ::before {
        content: '¥';
        font-size: 8px;
        margin-right: 3px;
    }
}
</style>
